<template>
	<image :src="theme?.bg?.login" mode="widthFix" class="img-top"></image>
	<NavBar :obj="{ title: '登录', color: '#fff', backgroundColor: 'transparent' }" />
	<view class="fill">
		<view class="welcome">
			<view class="hello">Hello!</view>
			<view class="desc">很高兴认识你，欢迎来到{{ info.title }}</view>
		</view>
		<view class="middle">
			<view class="card">
				<!-- 	<view class="item">
					<view class="label">会员编号</view>
					<input type="text" class="inp" placeholder-class="place-inp" placeholder="请填写会员编号" v-model="formRef.account" />
				</view> -->

				<view class="item">
					<view class="label">手机号码</view>
					<input type="number" class="inp" placeholder-class="place-inp" placeholder="请填写手机号" v-model="formRef.account" />
				</view>

				<view class="item">
					<view class="label">密码</view>
					<input password class="inp" placeholder-class="place-inp" placeholder="请填写登录密码" v-model="formRef.password" />
				</view>
			</view>
			<view class="tm-btn" @click="login">登录</view>
		</view>
		<view class="go-register flex items-center justify-center" @click="goUrl('/pages/register')">
			<view>去注册</view>
			<up-icon name="arrow-rightward" class="icon" :color="theme.themeColor"></up-icon>
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick, inject } from 'vue';
	import { port, imgUrl, goBack, goUrl, hint, loading, closeLoading } from '/service/port';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { useThemeStore } from '@/stores/theme';
	
	const theme = useThemeStore();

	const info = ref({});
	const formRef = ref({
		account: '',
		password: ''
	});

	async function getIndexIndex() {
		let res = await port('getIndexIndex');
		info.value = res.data;
	}

	async function login() {
		if (!formRef.value.account) {
			hint('请填写手机号');
			return false;
		}

		// if (!formRef.value.account) {
		// 	hint('请填写会员编号');
		// 	return false;
		// }

		if (!formRef.value.password) {
			hint('请填写密码');
			return false;
		}
		loading();
		let res = await port('login', formRef.value);

		setTimeout(() => {
			closeLoading();
			uni.setStorageSync('token', res.data.token);
			uni.switchTab({
				url: '/pages/index'
			});
			hint(res.msg);
		}, 300);
	}


	onShow(() => {
		getIndexIndex();
	});
</script>

<style scoped lang="scss">
	::v-deep page {
		background-color: #fff;
	}

	.img-top {
		width: 100%;
		height: 614rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.fill {
		position: relative;
		padding-top: 70rpx;
		margin: 0 30rpx;
		.welcome {
			margin-left: 19rpx;
			.hello {
				font-weight: 500;
				font-size: 66rpx;
				color: #ffffff;
			}
			.desc {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				margin-top: 10rpx;
			}
		}
		.middle {
			background: #ffffff;
			border-radius: 30rpx;
			margin-top: 54rpx;
			.card {
				padding: 30rpx;
				.item {
					padding-bottom: 50rpx;
					.label {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 20rpx;
					}
					.inp {
						font-weight: 400;
						font-size: 30rpx;
						color: #000;
						background: #f2f2f2;
						border-radius: 47rpx;
						padding: 20rpx 35rpx;
					}
					.place-inp {
						font-weight: 400;
						font-size: 30rpx;
						color: #cccccc;
					}
				}
			}
			.tm-btn {
				color: #ffffff;
			}
		}

		.go-register {
			margin-top: 300rpx;
			> view {
				font-weight: 500;
				font-size: 30rpx;
				color: $theme-color;
			}
			.icon {
				margin-top: 5rpx;
				margin-left: 5rpx;
				color: $theme-color !important;
			}

			> image {
				width: 26rpx;
				height: 14rpx;
				margin-left: 10rpx;
				margin-top: 5rpx;
			}
		}
	}
</style>
